<template>
  <div class="list-wrapper">
    <div class="item-wrapper">
      <div class="list-type">
        <span @click="selectType">{{currentTypeName}}<i class="el-icon-arrow-down"></i></span>
      </div>
      <ex-infinite-scroll ref="ins" class="data-list" url="pde/project/list" :size="20">
        <template slot="content" slot-scope="{list}">
          <div class="item" v-for="item in list" :key="item.id" @click="openProject(item.id)">
            <div class="row-1">
              {{item.name}}
            </div>
            <div class="row-2">
              <div class="left">
                所属部门：{{item.departmentName}}
              </div>
              <div class="right">
                发起人：{{item.createUserName}}
              </div>
            </div>
            <div class="row-2">
              <div class="left">
                项目状态：{{item.status === 0? '未开始': item.status === 100? '已公布': item.status === -100? '已终止': '进行中'}}
              </div>
              <div class="right">
                当前流程：{{item.stepName}}
              </div>
            </div>
          </div>
        </template>
        <template slot="footer" slot-scope="{noMore}">
          <div class="footer">
            {{noMore ? '没有更多信息了': '加载更多信息'}}
          </div>
        </template>
      </ex-infinite-scroll>
    </div>
    <Tab currentTab="list"/>
  </div>
</template>

<script>
import ExInfiniteScroll from '@/components/common/ex-infinite-scroll'
import Tab from './component/Tab'
import dingMixin from  '@/mixins/ding'

export default {
  data() {
    return {
     currentTypeName: '所属部门',
     departments: [],
     deptId: ''
    }
  },
  computed: {
    isManager() {
      return this.userInfo.roleIdList && this.userInfo.roleIdList.includes('1247700573888290817')
    },
    isTeamer() {
      return this.userInfo.roleIdList && this.userInfo.roleIdList.includes('1321365196464197633')
    },
    isNormal() {
      return this.userInfo.roleIdList && this.userInfo.roleIdList.includes('1321366856351617026')
    },
    isGuancha() {
      return this.userInfo.roleIdList && this.userInfo.roleIdList.includes('1301793232233959426')
    },
  },
  components: {
    Tab,ExInfiniteScroll
  },
  mixins: [dingMixin],
  async mounted() {
    this.getData();
    let deptList = await this.$httpN.get('sys/dept/list');
    if(!this.isManager && !this.isGuancha) {
      this.departments = deptList.filter((item) => item.id === this.userInfo.departmentIds)
    }else {
      this.departments = deptList;
    }    
    this.departments.forEach((item) => {
      item.key = item.name;
      item.value = item.id;
    })

    let id = this.$route.params.id;
    if(id) this.openProject(id);
  },
  methods: {
    selectType() {
      this.mobileChosen(this.departments, this.currentType,(data) => {
        this.currentTypeName = data.key;
        this.deptId = data.value;
        this.getData();
      })
    },
    getData() {
      this.$refs.ins.getData({
        flag: 1,
        deptId: this.deptId
      })
    },
    openProject(id) {
      this.$router.push({ name: 'mproject-project', params: {id: id, type: 'list'}})
    }
  }
}
</script>

<style lang="scss" scoped>
  .list-wrapper{
    min-height: 100vh;
    background: #F6F6F6;
    padding: 12px;
    padding-bottom: 50px;
    .list-type{
      margin-bottom: 10px;
      text-align: center;
    }
    .item-wrapper{
      .item{
        padding: 12px;
        box-shadow: 0 1px 3px rgb(221, 221, 221);
        background: #FFF;
        border-radius: 2px;
        margin-bottom: 10px;
        .row-1{
          font-weight: bold;
        }
        .row-2{
          margin-top: 5px;
          display: flex;
          div{
            flex: 1;
          }
          .right{
            text-align: right;
          }
        }
      }
      .footer{
        margin-top: 10px;
        clear:both;
        text-align: center;
        color: #BCBCBC;
        font-size: 12px;
      }
    }
  }
</style>